<template>
  <div class="lock-screen">
  <div class="lock-wrapper">
  <div class="lock-box-login text-center">
    <img :src="backgroundDiv" class="lock-wrapper-img" alt="lock avatar"/>
    <h1>{{ $store.state.webInfo.webName }}</h1>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
      <div class="login form">
        <div class="group-ipt email">
          <el-form-item prop="userName">
            <el-input  v-model="dataForm.userName" placeholder="输入你的用户名"></el-input>
          </el-form-item>
        </div>
        <div class="group-ipt password">
          <el-form-item prop="password">
            <el-input class="bg-input" v-model="dataForm.password"  type="password" placeholder="输入你的登录密码"></el-input>
          </el-form-item>
        </div>
      </div>
      <el-form-item>
        <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
      </el-form-item>
    </el-form>
    <div class="remember clearfix">
      <label class="forgot-password">
        <a    @click="regUrl()" >注册</a>
      </label>
    </div>
    </div>
</div>
  </div>
</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
        backgroundDiv: this.$store.state.webInfo.webLogo,
        hrefcom: this.$store.state.webInfo.webHost,
        dataForm: {
          userName: '',
          password: ''
        },
        dataRule: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      //  this.getCaptcha()
    },
    methods: {
      loginUrl () {
        this.$router.replace({name: 'm-login'})
      },
      regUrl () {
        this.$router.replace({ name: 'm-reg' })
      },
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'username': this.dataForm.userName,
              'password': this.dataForm.password
            }
            API.basemember.login(params).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token, { expires: `${data.expire || 0}s` })
                this.$router.replace({ name: 'home' })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style  lang="scss">
  body {
    color: #2A3542;
    background: #f1f2f7;
    font-family:Microsoft YaHei,"微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,Arial,Helvetica,sans-serif;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
  }
  ul li {
    list-style: none;
  }
  a, a:hover, a:focus {
    text-decoration: none;
    outline: none;
  }
  .white-bg {
    background: #fff;
    border-bottom: 1px solid #f1f2f7;
  }
  .header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
  }
  .header, .footer {
    min-height: 72px;
    padding: 0 15px;
  }
  a.logo {
    font-size: 18px;
    color: #2e2e2e;
    float: left;
    margin-top:21px;
    text-transform: uppercase;
  }
  a.logo span {
    color: #FF6C60;
  }
  .top-nav {
    margin-top: 7px;
  }
  .sidebar-toggle-box {
    float: left;
    padding-right: 15px;
    margin-top: 24px;
    color: #797979;
  }
  .sidebar-toggle-box .fa-bars {
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
  }
  #sidebar {
    width: 160px;
    height: 100%;
    position: fixed;
    background: #2a3542;
    overflow-y:scroll;
  }
  ul.sidebar-menu, ul.sidebar-menu li ul.sub {
    margin: -2px 0 0;
    padding: 0;
  }
  ul.sidebar-menu {
    margin-top: 75px;
  }

  #sidebar ul li {
    position: relative;
  }

  ul.sidebar-menu li {
    /* line-height: 20px !important; */
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
  }
  ul.sidebar-menu li a {
    color: #aeb2b7;
    text-decoration: none;
    display: block;
    padding: 15px 0 15px 10px;
    font-size: 12px;
    outline: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {
    color: #FF6C60;
  }

  ul.sidebar-menu li a i {
    font-size: 15px;
    padding-right: 6px;
  }
  ul.sidebar-menu li a span {
    display: inline-block;
    font-size: 14px;
  }
  ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
    background: #35404d;
    color: #fff;
    display: block;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  ul.sidebar-menu li a {
    color: #aeb2b7;
    text-decoration: none;
    display: block;
    padding: 15px 0 15px 10px;
    font-size: 12px;
    outline: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  ul.sidebar-menu li a.active i {
    color: #FF6C60;
  }

  #main-content {
    margin-left: 160px;
  }
  .wrapper {
    display: inline-block;
    margin-top: 72px;
    padding: 15px;
    width: 100%;
  }
  .site-footer {
    background: #5b6e84;
    color: #fff;
    padding: 10px 0;
    line-height:40px ;
  }


  .dataTable tr:last-child {
    border-bottom: 1px solid #ddd;
  }
  td.details table tr td, .dataTable tr:last-child {
    border: none;
  }

  div.dataTables_length label {
    float: left;
    text-align: left;
  }
  .dataTables_length label, .dataTables_filter label {
    font-weight: 300;
  }

  .btn-success input {
    position: absolute;
    font-size: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  .dataTables_info, .dataTables_paginate {
    padding: 15px 0;
    font-size: 14px;
    float: right;
  }

  /*state overview*/

  .state-overview .symbol, .state-overview .value {
    display: inline-block;
    text-align: center;
  }

  .state-overview .value  {
    float: right;

  }

  .state-overview .value h1, .state-overview .value p  {
    margin: 0;
    padding: 0;
    color: #c6cad6;
  }
  .login-btn-submit{
    width: 100%;
  }

  .state-overview .value h1 {
    font-weight:100;
    font-size: 30px;
  }

  .state-overview .symbol i {
    color: #fff;
    font-size: 40px;
  }

  .state-overview .symbol {
    width: 30%;
    padding: 25px 15px;
    -webkit-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
  }

  .state-overview .value {
    width: 68%;
    padding-top: 21px;
  }

  .state-overview .terques {
    background: #6ccac9;
  }

  .state-overview .red {
    background: #ff6c60;
  }

  .state-overview .yellow {
    background: #f8d347;
  }

  .state-overview .blue {
    background: #57c8f2;
  }
  /*main chart*/
  .n-left{margin: 0 0 10px 0;}
  .h-left{margin: 0 0 10px 15px;}
  /*lock screen*/
  .lock-screen {
    background:#02bac6 url(~@/assets/img/lock-bg.jpg);
    background-size: cover;
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    position: absolute;
  }

  .lock-wrapper {
    margin: 5% auto;
    max-width: 330px;

  }

  .lock-box-login {
    background: rgba(255,255,255,.3);
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    position: relative;
    height: 350px;
  }

  .lock-wrapper-img {
    position: absolute;
    left: 47%;
    top: -40px;
    margin-left: -42.5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 5px solid #fff;
    width: 100px;
    height: 100px;
  }

  .lock-wrapper h1 {
    text-align: center;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    padding: 44px 0 10px 0;
  }

  .lock-wrapper .locked {
    margin-bottom: 20px;
    display: inline-block;
    color: #026f7a;
  }

  .btn-lock,.btn-lock:hover {
    background: #02b5c2;
    color: #fff;
  }

  .lock-input {
    width: 100%;
    border: none;
    float: left;
    margin-right: 3px;
    height: 48px;
    font-size: 18px;
  }

  #time {
    width: 100%;
    color: #fff;
    font-size: 60px;
    margin-bottom: 80px;
    display: inline-block;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
  }

  .form-signin .btn-login {
    background: #f67a6e;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    box-shadow: 0 4px #e56b60;
    margin-bottom: 20px;
  }

  ul.top-menu > li {
    margin: 10px;
  }
  .fc-header-title {
    display: inline-block;
    vertical-align: top;
    font-size: 24px !important;
    color: #C8CCD7;
    font-weight: 300;
  }

  .remember{

    line-height: 30px;
  }
  .remember label{
    display: block;
  }
  .remember-me{
    font-size: 20px;
    float: left;
    position: relative;
    cursor: pointer;
  }
  .icon{
    width: 11px;
    height: 11px;
    display: block;
    border: 1px solid #ccc;
    float: left;
    margin-top: 8px;
    margin-right: 5px;
    cursor: pointer;
  }
  .zt{
    width: 9px;
    height: 9px;
    background: #0f88eb;
    margin: 1px;
    display: block;
  }
  #remember-me{
    position: absolute;
    left: 0;
    top: 8px;
    opacity: 0;
    cursor: pointer;
  }
  .forgot-password{
    float: right;
    margin-top: -10px;
    font-size: 16px;
  }
  .forgot-password a{
    color: #555ccc;
  }
  .forgot-password a:hover{
    text-decoration: underline;
  }

  .fc-header-center
  {
    width: 33.33%;
  }
  table.display tr.odd.gradeA {
    background-color: #F9F9F9;
  }
  table.display tr.even.gradeA {
    background-color: #FFFFFF;
  }
  .center
  {
    text-align: center;
  }
  #no-more-tables{font-size: 12px;}
  .profile-nav ul {
    margin-top: 1px;
  }

  .profile-nav ul > li {
    border-bottom: 1px solid #ebeae6;
    margin-top: 0;
    line-height: 30px;
  }

  .profile-nav ul > li:last-child {
    border-bottom: none;
  }

  .profile-nav ul > li > a {
    border-radius: 0;
    -webkit-border-radius: 0;
    color: #89817f;
    border-left: 5px solid #fff;
  }

  .profile-nav ul > li > a:hover, .profile-nav ul > li > a:focus, .profile-nav ul li.active  a {
    background: #f8f7f5 !important;
    border-left: 5px solid #ff766c;
    color: #89817f !important;
  }

  .profile-nav ul > li:last-child > a:last-child {
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
  }

  .profile-nav ul > li > a > i{
    font-size: 16px;
    padding-right: 10px;
    color: #bcb3aa;
  }
  .bio-desk h4.terques {
    color: #4CC5CD;
  }
  .bio-chart {
    width: 40%;
  }

  .bio-chart, .bio-desk {
    float: left;
  }
  #mask
  {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position:fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    display: none;
  }
  #mask2
  {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position:fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    display: none;
  }
  iframe
  {
    border: none;
    padding: 0px !important;
    width: 800px;
    height: 320px;
    background: #ffffff;
    overflow: hidden;
  }
  .checkboxes label, .radios label {
    display: block;
    cursor: pointer;
    line-height: 20px;
    padding-bottom: 2px;
    padding-left: 16px;
    font-weight: 300;
    width: 20%;
    float: left;
    font-size: 14px;
  }

  .radios {
    padding-top: 6px;
    margin-left: 0px;
    margin-right: 0px;
  }

  .label_check input,
  .label_radio input {
    margin-right: 5px;
  }

  .has-js .label_check,
  .has-js .label_radio {
    padding-left: 34px;
  }

  #imglist div{margin-bottom: 20px; text-align: center; }
  #imglist img{width: 60%; height: 60%;border:1px solid #C2C2C2;     border-radius: 4px;}
  /*personal task*/

  .task-thumb {
    width: 90px;
    float: left;
    margin-bottom: 5px;
  }

  .task-thumb img {
    border-radius: 4px;
    -webkit-border-radius: 4px;
  }

  .task-thumb-details {
    display: inline-block;
    margin: 25px 0 0 10px;
  }

  .task-progress {
    float: left;
  }

  .task-thumb-details h1, .task-thumb-details h1 a, .task-progress h1, .task-progress h1 a {
    color: #39b5aa;
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: 400;
  }

  .task-thumb-details p, .task-progress p {
    padding-top: 5px;
    color: #a4aaba;
  }
  .badge.bg-primary {
    background: #8075c4;
  }

  .badge.bg-success {
    background: #a9d86e;
  }

  .badge.bg-warning {
    background: #FCB322;
  }

  .badge.bg-important {
    background: #ff6c60;
  }

  .badge.bg-info {
    background: #41cac0;
  }

  .badge.bg-inverse {
    background: #2A3542;
  }
  .badge
  {
    padding: 8px;
  }
  .control1
  {
    margin: 0px;
    height: 26px;
  }
  .radio-list  label,
  .checkbox-list label{
    display: inline-block;
    width: 120px;
    font-weight: normal;
  }
  .radio-list .radio,
  .radio-list .radio span,
  .radio-list .radio input {
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 10px 0 0;
  }

</style>
